<template>
    <div class="search_con any_tanxing">
        <div class="sea_left">
            <div class="any_tanxing">
                <div class="fontStyle">收货人姓名：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="consigneeName">
                    
                </el-input>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">收货人手机：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="consigneePhone">
                </el-input>
            </div>
             <div class="any_tanxing">
                <div class="fontStyle">订单号：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="orderNumber">
                </el-input>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">商品编码：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="commodityCode">
                </el-input>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">会员分组：</div> 
                <el-select v-model="Member" placeholder="-- 请选择 --" size="mini" style="display:inline-block;" class="wd">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">商品名称：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="shopsName">
                </el-input>
            </div>
            <div class="any_tanxing">
                <div  class="fontStyle">下单时间：</div> 
                <el-date-picker style="display:inline-block;margin-right:10px;"  class="wd" 
                v-model="starTime"
                align="right"
                type="date"
                size="mini"
                placeholder="开始时间"
                :picker-options="pickerOptions1">
                </el-date-picker> 
                <el-date-picker style="display:inline-block;"  class="wd" 
                v-model="endTime"
                align="right"
                type="date"
                size="mini"
                placeholder="结束时间"
                :picker-options="pickerOptions1">
                </el-date-picker>           
            </div>
        </div>
        <div class="sea_left">
            <div class="any_tanxing">
                <div class="fontStyle">快递单号：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="courierNumber">
                    
                </el-input>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">配送方式：</div> 
                <el-select v-model="distributionMode" placeholder="-- 请选择 --" size="mini" style="display:inline-block;" class="wd">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">发票：</div> 
                <el-select v-model="invoice" placeholder="-- 请选择 --" size="mini" style="display:inline-block;" class="wd">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">会员ID：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="memberId">
                    
                </el-input>
            </div>
            <div class="any_tanxing mar">
                <div class="fontStyle">收货人地区：</div> 
                <v-distpicker :placeholders="placeholders"></v-distpicker>
            </div>
            <div class="any_tanxing">
                <div  class="fontStyle">付款时间：</div> 
                <el-date-picker style="display:inline-block;margin-right:10px;"  class="wd" 
                v-model="starTime"
                align="right"
                type="date"
                size="mini"
                placeholder="开始时间"
                :picker-options="pickerOptions1">
                </el-date-picker> 
                <el-date-picker style="display:inline-block;"  class="wd" 
                v-model="endTime"
                align="right"
                type="date"
                size="mini"
                placeholder="结束时间"
                :picker-options="pickerOptions1">
                </el-date-picker>           
            </div>
        </div>
        <div class="sea_left">
            <div class="any_tanxing">
                <div class="fontStyle">收货地址：</div> 
                <el-input style="display:inline-block;" class="wd"
                    size="mini"
                    v-model="courierNumber">                 
                </el-input>
            </div>
            <div class="any_tanxing">
                <div class="fontStyle">支付方式：</div> 
                <el-select v-model="distributionMode" class="wd" placeholder="-- 请选择 --" size="mini" style="display:inline-block">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="dibu any_tanxing">
            <div class="fontStyle"> </div>
            <el-checkbox v-model="checked" size="mini">筛选门店收款订单</el-checkbox>
        </div>
        <div class="dibu any_tanxing dibu2">
            <div class="fontStyle"> </div>
            <el-button  :loading='$store.state.isLoading' type="primary" icon="el-icon-search" size="mini">查询</el-button>
        </div>
    </div>
</template>

<style lang="less" scoped>
.search_con {
  background: #fff;
  padding-left: 35px;
  flex-wrap: wrap;
}
.sea_left {
  flex: 1;
}
.sea_left > div {
  margin-bottom: 10px;
}

</style>
<script>
import VDistpicker from 'v-distpicker'
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      consigneeName: "", //收货人姓名
      consigneePhone: "", //收货人手机
      orderNumber: "", //订单号
      commodityCode: "", //商品编码
      Member: "", //会员
      shopsName: "", // 商品名称
      starTime: "", //开始时间
      endTime: "", //结束时间
      courierNumber: "", //快递单号
      distributionMode: "", //配送方式
      invoice: "", //发票
      memberId: "", //会员ID

      checked: false, //筛选门店收款订单
      value1: "",
      value2: "",
      options2: [
        {
          value: "物流",
          label: "物流"
        }
      ],
      placeholders: {
              province: '------- 省 --------',
              city: '--- 市 ---',
              area: '--- 区 ---',
      }
    };
  },
  components: {VDistpicker },
  methods: {
    proviceHandle(value) {
      const city = [];
      for (let code in value.cities) {
        let item = value.cities[code];
        city.push(
          Object.assign(item, {
            label: item.name
          })
        );
      }
      this.city = city;
      this.county = [];
      this.selectProvince = value.name;
      this.selectCity = null;
      this.selectCounty = null;
    },
    cityHandle(value) {
      const county = [];
      for (let code in value.districts) {
        let item = value.districts[code];
        county.push({
          code,
          label: item,
          name: item
        });
      }
      this.county = county;
      this.selectCity = value.name;
      this.selectCounty = null;
    },
    countyHandle(value) {
      this.selectCounty = value.name;
    }
  },
  computed: {
    address() {
      const { selectProvince, selectCity, selectCounty } = this;
      return (
        (selectProvince ? selectProvince : "") +
        (selectCity ? "，" + selectCity : "") +
        (selectCounty ? "，" + selectCounty : "")
      );
    }
  }
};
</script>
